<template>
	<view class="zone">
		<Header title="水晶记录" color="#fff"></Header>
		<view class="main">
			<scroll-view scroll-y class="scrollbox" @scrolltolower="scrolltolower">
				<view class="item" v-for="(item, index) in datalist" :key="index">
						<view class="left">
							<p>{{item.remark}}</p>
							<p>{{item.created_at}}</p>
						</view>
						<view class="right">{{item.operation_type == 1?'+':'-'}}{{item.number}}</view>
					</view>		

					<view v-if="datalist.length==0" class="empty">
						<image src="http://img.cpgm.cc/panda/static/public/empty.png" class="zaneu_img" mode="widthFix"></image>
						<text>没有数据哦~</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />					
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				datalist: [],
			};
		},
		onLoad(){
			this.getCrystalList();
		},
		methods: {
			scrolltolower() {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.getCrystalList();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},

			async getCrystalList(){

			},

			// 获取银元明细
			async getCrystalList() {
				let res = await this.$http.index.getCrystalList({
					page: this.page
				})
				this.datalist = [...this.datalist, ...res.data];
				this.max_page = res.page;
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				}
			},

		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #0477FD 0%, #7AFDCF 100%);
	min-height: 100vh;
}

.main {
	padding: 10px ;
}

.scrollbox {
	height: calc(100vh - 85px);

	.item {
		background: rgba(255, 255, 255, 0.8);
		border-radius: 8px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

		.left {
			p:nth-child(1) {
				color: #131314;
				font-size: 14px;
				font-weight: 600;
			}
			p:nth-child(2) {
				color: #333333;
				font-size: 12px;
				opacity: 0.8;
				margin-top: 4px;
			}
		}

		.right {
			font-size: 14px;
			font-weight: 600;
			color: #333333;
		}
	}
}

</style>
